<script setup lang="ts">
import { reactive, ref, onMounted } from "vue";
import { useConsultStore } from "@/stores";
import { ConsultType } from "@/enums";
import { getKnowledgeList, getDoctorListApi, likeApi } from "@/services/home";
import type { KnowledgeParams, KnowledgeRes, DoctorRes } from "@/types/home";
import { showToast } from "vant";
const store = useConsultStore();
const active = ref(0);
const data = reactive<KnowledgeParams>({
  type: "like",
  current: 1,
  pageSize: "10",
});
async function getKnowledge() {
  const res = await getKnowledgeList(data.type, data.current, data.pageSize);
  console.log(res.data.rows);
  list.value = res.data.rows;
}
// 获取医生列表
const doctorList = ref<DoctorRes[]>([]);
async function getDoctorList() {
  const res = await getDoctorListApi("1", "5");
  doctorList.value = res.data.rows;
}
onMounted(() => {
  getDoctorList();
});
// tabs数据
const tabList = ref([
  { name: "关注", type: "like" },
  { name: "推荐", type: "recommend" },
  { name: "减脂", type: "fatReduction" },
  { name: "饮食", type: "food" },
]);

const list = ref<KnowledgeRes[]>([]);
const loading = ref(false);
const finished = ref(false);
// 下拉加载更多
const onLoad = async () => {
  loading.value = true;
  if (list.value.length === 0) data.current = 1;
  else data.current++;
  const res = await getKnowledgeList(data.type, data.current, data.pageSize);
  const newList = res.data.rows;
  if (newList.length === 0) finished.value = true;
  else list.value = [...list.value, ...newList];
  loading.value = false;
};
// 点击tab 让type值切换
function tab(e: any) {
  console.log(e.name);
  switch (e.name) {
    case 0:
      data.type = "like";
      break;
    case 1:
      data.type = "recommend";
      break;
    case 2:
      data.type = "fatReduction";
      break;
    case 3:
      data.type = "food";
      break;
  }
  getKnowledge();
}

const type = ref("");
// 关注的方法 接受一个id
async function likeAPI(id: string) {
  await likeApi(type.value, id);
  showToast("操作成功");
  getDoctorList();
  getKnowledge();
}
// 医生的关注
function Doctorlike(id: string) {
  type.value = "doc";
  likeAPI(id);
}
// 文章的关注
function ArticleLike(id: string) {
  type.value = "knowledge";
  likeAPI(id);
}
</script>

<template>
  <div class="home-page">
    <!-- 头部 -->
    <div class="home-header">
      <div class="con">
        <h1>优医</h1>
        <div class="search">
          <cp-icon name="home-search" /> 搜一搜：疾病/症状/医生/健康知识
        </div>
      </div>
    </div>
    <!-- 导航 -->
    <div class="home-navs">
      <van-row>
        <van-col span="8">
          <router-link to="/" class="nav">
            <cp-icon name="home-doctor"></cp-icon>
            <p class="title">问医生</p>
            <p class="desc">按科室查问医生</p>
          </router-link>
        </van-col>
        <van-col span="8">
          <router-link
            to="/consult/fast"
            @click="store.setType(ConsultType.Fast)"
            class="nav"
          >
            <cp-icon name="home-graphic"></cp-icon>
            <p class="title">极速问诊</p>
            <p class="desc">20s医生极速回复</p>
          </router-link>
        </van-col>
        <van-col span="8">
          <router-link to="/" class="nav">
            <cp-icon name="home-prescribe"></cp-icon>
            <p class="title">开药门诊</p>
            <p class="desc">线上买药更方便</p>
          </router-link>
        </van-col>
      </van-row>
      <van-row>
        <van-col span="6">
          <router-link to="/" class="nav min">
            <cp-icon name="home-order"></cp-icon>
            <p class="title">药品订单</p>
          </router-link>
        </van-col>
        <van-col span="6">
          <router-link to="/" class="nav min">
            <cp-icon name="home-docs"></cp-icon>
            <p class="title">健康档案</p>
          </router-link>
        </van-col>
        <van-col span="6">
          <router-link to="/" class="nav min">
            <cp-icon name="home-rp"></cp-icon>
            <p class="title">我的处方</p>
          </router-link>
        </van-col>
        <van-col span="6">
          <router-link to="/" class="nav min">
            <cp-icon name="home-find"></cp-icon>
            <p class="title">疾病查询</p>
          </router-link>
        </van-col>
      </van-row>
    </div>
    <!-- 轮播图 -->
    <div class="home-banner">
      <van-swipe indicator-color="#fff">
        <van-swipe-item>
          <img src="@/assets/ad.png" alt="" />
        </van-swipe-item>
        <van-swipe-item>
          <img src="@/assets/ad.png" alt="" />
        </van-swipe-item>
      </van-swipe>
    </div>
    <!-- tab栏 -->
    <van-tabs @click-tab="tab" v-model:active="active">
      <van-tab
        :title="item.name"
        v-for="(item, index) in tabList"
        :key="item.type"
      />
    </van-tabs>
    <van-list
      v-model:loading="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
    >
      <div class="content">
        <div class="content-like" v-if="active == 0">
          <div class="content-head">
            <p>推荐关注</p>
            <p>查看更多 <van-icon name="arrow" /></p>
          </div>
          <div class="content-doctor-list">
            <div
              class="content-doctor-item"
              v-for="(item, index) in doctorList"
              :key="item.id"
            >
              <img :src="item.avatar" alt="" />
              <p>{{ item.name }}</p>
              <p class="yichu">{{ item.hospitalName }}</p>
              <p>{{ item.depName }}</p>
              <van-button round @click="Doctorlike(item.id)">{{
                item.likeFlag == 0 ? "关注" : "已关注"
              }}</van-button>
            </div>
          </div>
        </div>
        <div class="content-list">
          <div class="content-item" v-for="(item, index) in list" :key="index">
            <div class="content-top">
              <img :src="item.creatorAvatar" alt="" />
              <div class="txt">
                <p>{{ item.creatorName }}</p>
                <p>
                  {{ item.creatorHospatalName }} {{ item.creatorDep }}
                  {{ item.creatorTitles }}
                </p>
              </div>
              <van-button round @click="ArticleLike(item.id)">{{
                item.likeFlag == 1 ? "关注" : "已关注"
              }}</van-button>
            </div>
            <h2>{{ item.title }}</h2>
            <p class="conttt">{{ item.content.replace(/<[^>]+>/g, "") }}</p>
            <div class="imgs">
              <van-image
                v-for="(o, i) in item.coverUrl"
                :key="i"
                fit="cover"
                :src="o"
              />
            </div>
            <p class="botom">
              {{ item.collectionNumber }}收藏 {{ item.commentNumber }}评论
            </p>
          </div>
        </div>
      </div>
    </van-list>
  </div>
</template>

<style lang="scss" scoped>
// @import "@/styles/main.scss";
.van-tabs {
  width: 250px;
  margin-top: 50px;
}
.home-page {
  padding-bottom: 50px;
}
.home-header {
  height: 100px;
  position: relative;
  &::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 90px;
    background: linear-gradient(180deg, rgba(62, 206, 197, 0.85), #26bcc6);
    border-bottom-left-radius: 150px 20px;
    border-bottom-right-radius: 150px 20px;
  }
  .con {
    position: relative;
    padding: 0 15px;
    > h1 {
      font-size: 18px;
      color: #fff;
      font-weight: normal;
      padding: 20px 0;
      line-height: 1;
      padding-left: 5px;
    }
    .search {
      height: 40px;
      border-radius: 20px;
      box-shadow: 0px 15px 22px -7px rgba(224, 236, 250, 0.8);
      background-color: #fff;
      display: flex;
      align-items: center;
      padding: 0 20px;
      color: var(--cp-dark);
      font-size: 13px;
      .cp-icon {
        width: 20px;
        height: 20px;
        margin-right: 5px;
      }
    }
  }
}
.home-navs {
  padding: 10px 15px 0 15px;
  .nav {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px 0;
    .cp-icon {
      width: 50px;
      height: 50px;
    }
    .title {
      font-weight: 500;
      margin-top: 5px;
      color: var(--cp-text1);
    }
    .desc {
      font-size: 11px;
      color: var(--cp-tag);
      margin-top: 2px;
    }
    &.min {
      .cp-icon {
        font-size: 31px;
      }
      .title {
        font-size: 13px;
        color: var(--cp-text2);
        font-weight: normal;
      }
    }
  }
}
.home-banner {
  padding: 10px 15px;
  height: 100px;
  img {
    width: 100%;
    height: 100%;
  }
}
.content {
  width: 100vw;
  &-doctor-list {
    overflow-x: auto;
    height: 230px;
    display: -webkit-box;
    -webkit-overflow-scrolling: touch;
    margin: 0.5rem 0;
  }
  &-doctor-item {
    width: 150px;
    margin-right: 10px;
    padding: 20px 0;
    background-color: #fff;
    border-radius: 10px;
    text-align: center;
    img {
      width: 80px;
      height: 80px;
    }
    p {
      margin: 4px 0;
    }
    .yichu {
      width: 100%;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
    }
    .van-button {
      width: 100px;
      height: 40px;
      background-color: var(--cp-primary);
      color: #fff;
      border: 1px solid var(--cp-primary);
    }
  }
  &-doctor-list::-webkit-scrollbar {
    display: none;
  }
  &-like {
    width: 100%;
    padding: 10px;
    background-color: #cccccc1b;
  }
  &-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 15px;
    height: 50px;
    line-height: 50px;
    p:nth-child(1) {
      font-size: 18px;
    }
    p:nth-child(2) {
      color: #00000060;
    }
  }
  &-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    img {
      width: 50px;
      height: 50px;
      border-radius: 50%;
    }
  }
  &-item {
    margin: 10px;
    padding: 10px;
    border-bottom: 1px solid #cccccc1b;
    h2 {
      font-size: 14px;
      color: #000000c1;
      margin: 10px 0;
    }
    .conttt {
      color: #00000060;
      overflow: hidden;
      text-overflow: ellipsis;
      -webkit-line-clamp: 2;
      margin-bottom: 5px;
      display: -webkit-box;
      -webkit-box-orient: vertical;
    }
    .botom {
      color: #00000060;
      margin-top: 10px;
    }
    .imgs {
      display: flex;
      align-items: center;
      justify-content: space-between;
      :deep() {
        .van-image {
          width: 32%;
          height: 130px;
          border-radius: 20px;
          img {
            border-radius: 20px;
          }
        }
      }
    }
    .txt {
      p:nth-child(1) {
        font-size: 18px;
      }
      p:nth-child(2) {
        width: 200px;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        color: #00000094;
      }
    }
    :deep() {
      .van-button {
        // width: 80px !important;
        height: 30px;
        background-color: transparent;
        color: var(--cp-primary);
        border: 1px solid var(--cp-primary);
      }
    }
  }
}
</style>
